<template>
	<el-container>
		<el-aside width="260px">
			<sc-cat @change="cat_change" :appId="this.$API.cmsfavuri.SYS_ID"></sc-cat>
		</el-aside>

		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button icon="el-icon-plus" type="primary" :disabled="!selectCat.id" @click="open_dialog" />
					<el-divider direction="vertical"></el-divider>
					<el-radio-group v-model="view">
						<el-radio-button label="1">表格</el-radio-button>
						<el-radio-button label="2">列表</el-radio-button>
						<el-radio-button label="3">格子</el-radio-button>
					</el-radio-group>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input v-model="param.key" clearable placeholder="关键字" />
						<el-button type="primary" @click="search"><sc-icon name="sc-search"/></el-button>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable ref="table" :tableName="tableName" :data="list" :column="column" row-key="id"
					@menu-handle="menuHandle" @selection-change="selectionChange" :hidePagination="true" :hideDo="true"
					v-if="view == 1">
					<!-- 固定列-选择列 -->
					<el-table-column fixed type="selection" width="60" align="center" />
					<el-table-column label="#" type="index" width="60"></el-table-column>
					<el-table-column align="center" fixed="right" label="操作" width="140">
						<template #default="scope">
							<el-button size="small" text type="primary" @click="open_dialog(scope.row)">
								编辑
							</el-button>
							<el-divider direction="vertical" />
							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button type="primary" text size="small">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
					<template #title="scope">
						<el-link type="primary" :href="scope.row.uri" target="_blank" @click="openUri(item)">{{
							scope.row.title }}</el-link>
					</template>
					<template #row_status="scope">
						<el-tooltip :content="scope.row.row_status ? '正常' : '停用'" placement="right">
							<el-switch v-model="scope.row.row_status" :active-value="1" :inactive-value="2"
								@change="status_item($event, scope.row)">
							</el-switch>
						</el-tooltip>
					</template>
				</scTable>
				<scList v-if="view == 2" :data="list" :showOpt="true" :showEdit="true" :showDrop="true" @editItem="editItem" @dropItem="removeItem" style="height: 100%;">
					<template #item="{ item }">
						<div class="list-item">
							<el-link :href="item.uri" :title="item.title" target="_blank" @click="openUri(item)">
								<el-image :src="getImg(item)" style="width: 16px; height: 16px" />
								<div style="padding-left: 5px;line-height: 20px;">{{ item.title }}</div>
							</el-link>
						</div>
					</template>
				</scList>
			</el-main>
			<edit ref="edit" @complete="complete" />
		</el-container>
	</el-container>
</template>
<script>
import { defineAsyncComponent } from "vue";
export default {
	components: {
		edit: defineAsyncComponent(() => import("./edit")),
	},
	data() {
		return {
			tableName: 'cms_fav_uri',
			param: {
				cat_id: '0',
				row_status: 1,
				create_time: '',
				key: ''
			},
			view: 2,
			list: [],
			selectCat: {},
			selection: [],
			column: [
				{ label: "id", prop: "id", hide: true },
				{ prop: 'types', label: '类型', width: 80 },
				{ prop: 'title', label: '标题', minWidth: 140, align: 'left' },
				{ prop: 'remark', label: '备注', width: 100, align: 'left' },
				{ prop: 'row_status', label: '数据状态', width: 80 },
				{ prop: 'update_names', label: '更新人员', width: 100 },
				{ prop: 'update_time', label: '更新时间', width: "160", sortable: true, formatter: this.$TOOL.dateTimeFormat },
				{ prop: 'create_names', label: '创建人员', width: 100 },
				{ prop: 'create_time', label: '创建时间', width: "160", sortable: true, formatter: this.$TOOL.dateTimeFormat },
			],
		};
	},
	mounted() {
		this.search();
	},
	methods: {
		complete() {
			this.search();
		},
		async search() {
			var res = await this.$API.cmsfavuri.list.get(this.param);
			if (!res || res.code != 200) {
				return;
			}
			this.list = res.data;
		},
		async status_item(e, row) {
			this.$SCM.status_item(this, this.$API.cmsfavuri.status, row, row.row_status);
		},
		status_list(status) {
			this.$SCM.status_list(this, this.$API.cmsfavuri.status, this.selection, status);
		},
		async delete_item(row) {
			this.$SCM.delete_item(this, this.$API.cmsfavuri.delete, row);
		},
		delete_list() {
			this.$SCM.delete_list(this, this.$API.cmsfavuri.delete, this.selection);
		},
		open_dialog(row) {
			if (row.id) {
				row.cat_names = this.selectCat.label;
				this.$refs.edit.open(row);
				return;
			}
			if (this.selectCat.id) {
				this.$refs.edit.open({ cat_id: this.selectCat.id, cat_names: this.selectCat.label });
				return;
			}
			this.$message.warning("请选择分类");
		},
		selectionChange(selection) {
			this.selection = selection;
		},
		menuHandle(obj) {
			if (obj.command == "add") {
				this.open_dialog();
				return;
			}
			if (obj.command == "edit") {
				this.open_dialog(obj.row);
				return;
			}
			if (obj.command == "delete") {
				this.delete_item(obj.row);
				return;
			}
		},
		cat_change(obj) {
			this.selectCat = obj;
			if (obj) {
				this.param.cat_id = obj.id;
			}
			this.search();
		},
		getImg(item) {
			return this.$CONFIG.SERVER_URL + '/data/images/favicon/' + (item.icon || '0');
		},
		async openUri(item) {
			var res = await this.$API.cmsfavuri.open.get(item.id);
			if (!res || res.code != 200) {
				return false;
			}
			return res.data;
		},
		editItem(item) {
			this.open_dialog(item);
		},
		removeItem(item) {
			alert(item.title);
		}
	},
};
</script>
<style scoped>
.list-item {
	border-bottom: dashed 1px #ccc;
}
</style>
